<template>
  <Card
    :style="{
      boxShadow: '0px 1px 1px 1px rgba(0,0,0,.1)',
      top: '10px',
      border: 'none',
      borderRadius: '0',
    }"
  >
    <Form
      ref="form"
      :model="queryForm"
      :label-width="100"
      label-position="right"
    >
      <Row>
        <Col span="6" style="min-width: 280px">
          <FormItem label="所属类别" prop="category_ids">
            <Select v-model="queryForm.category_ids" clearable multiple>
              <Option
                v-for="item in cateGory"
                :value="item.category_id"
                :key="item.category_id"
                >{{ item.category_name }}</Option
              >
            </Select>
          </FormItem>
        </Col>
        <Col span="6" style="min-width: 280px">
          <FormItem label="壁纸名字" class="formitem">
            <Input
              type="text"
              v-model.trim="queryForm.name"
              placeholder="壁纸名字"
            />
          </FormItem>
        </Col>
        <Col span="6" style="min-width: 280px">
          <FormItem label="壁纸标题" class="formitem">
            <Input
              type="text"
              v-model.trim="queryForm.title"
              placeholder="壁纸标题"
            />
          </FormItem>
        </Col>
        <Col span="6" style="min-width: 280px">
          <FormItem label="壁纸状态" prop="status">
            <Select v-model="queryForm.status" clearable>
              <Option value="1">启动</Option>
              <Option value="2">禁用</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6" style="min-width: 280px">
          <FormItem label="来源名字" class="formitem">
            <Input
              type="text"
              v-model.trim="queryForm.source_name"
              placeholder="来源名字"
            />
          </FormItem>
        </Col>
        <Col span="12" style="min-width: 300px">
          <FormItem label="创建时间" class="formitem">
            <DatePicker
              type="datetimerange"
              style="width: 300px"
              @on-change="updateTime"
              :value="[queryForm.create_time_start, queryForm.create_time_end]"
            >
            </DatePicker>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <FormItem class="formitem-button">
          <Button
            :style="{ marginRight: '21px' }"
            type="primary"
            @click="query()"
            >查询</Button
          >
          <Button type="primary" @click="add()">新增</Button>
        </FormItem>
      </Row>
    </Form>
  </Card>
</template>

<script>
export default {
  props: ["queryForm", "cateGory"],
  data: () => {
    return {};
  },
  methods: {
    //查询
    query() {
      this.$parent.query();
    },
    add() {
      //新增
      this.$parent.add();
    },
    updateTime(date) {
      this.$emit("updateTime", date);
    },
  },
};
</script>